<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.web{
			background-color: skyblue;
			width: 300px;
			position: absolute;
			height: 300px;
			border-radius: 50%;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.aside{
			background-color: white;
			width: 97%;
			position: absolute;
			height: 97%;
			border-radius: 50%;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.inside{
			background-color: lightskyblue;
			width: 97%;
			position: absolute;
			height: 97%;
			border-radius: 50%;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			overflow: hidden;
		}
		.inside::after{
			content: "";
			background-color:white;
			width:200%;
			position: absolute;
			height: 200%;
			border-radius: 45%;
			left: -50%;
			top:100%;
			transition: all;
			animation-duration: 10s;
			animation-iteration-count: infinite;
			animation-timing-function: linear ;
			animation-name: yuan;
			animation-fill-mode: forwards;
		}
		.inside::before{
			content: "";
			background-color:white;
			width:200%;
			position: absolute;
			height: 200%;
			border-radius: 45%;
			left: -50%;
			top: 100%;
			transition: all;
			animation-duration: 10s;
			animation-iteration-count: infinite;
			animation-timing-function: linear ;
			animation-name: water;
			animation-fill-mode: forwards;
		}
		@keyframes yuan{
			0%{
				transform: rotate(0deg);
				top:100%				
			}
			
			100%{
				transform: rotate(360deg);
				top:0%;
			}
		}
		@keyframes water{
			0%{
				transform: rotate(0deg);
				top:100%				
			}
			
			100%{
				transform: rotate(360deg);
				top:0%;
			}
		}
	</style>
	</head>
	<body>
		<div class="web">
			<div class="aside">
				<div class="inside animation">					
				</div>
			</div>
		</div>
	</body>
</html>
